<template>
<!-- 急救处理报告 -->
    <div >
        <div class="header">
            <div class="header-left" @click="finish"><image :src="imgUrl" class="header-left-img"></image></div>
            <div class="header-center"><text class="header-text">急救处理报告</text></div>
            <div class="header-right" @click="save"><text class="header-right-text">保存</text></div>
        </div>
        <list>           
            <cell>
                <div class="content">
                    <div class="box">                       
                        <div class="checkbox" :class="[firstaids.compression?'box-active':'']" @click="reverse('compression')"><text class="checkbox-text" :class="[firstaids.compression?'box-text-active':'']">加压</text></div>
                        <div class="checkbox mf-30":class="[firstaids.dress?'box-active':'']" @click="reverse('dress')"><text class="checkbox-text" :class="[firstaids.dress?'box-text-active':'']" >包扎</text></div>
                        <div class="checkbox mf-30" :class="[firstaids.disinfect?'box-active':'']" @click="reverse('disinfect')"><text class="checkbox-text" :class="[firstaids.disinfect?'box-text-active':'']" >消毒</text></div>
                        <div class="checkbox mf-30" :class="[firstaids.splint?'box-active':'']" @click="reverse('splint')"><text class="checkbox-text" :class="[firstaids.splint?'box-text-active':'']" >夹板</text></div>                       
                    </div>
                    <div class="box">                       
                        <div class="checkbox" :class="[firstaids.cervicalgear?'box-active':'']" @click="reverse('cervicalgear')"><text class="checkbox-text" :class="[firstaids.cervicalgear?'box-text-active':'']" >颈托</text></div>
                        <div class="checkbox mf-30" :class="[firstaids.ECG?'box-active':'']" @click="reverse('ECG')"><text class="checkbox-text" :class="[firstaids.ECG?'box-text-active':'']" >ECG</text></div>
                        <div class="checkbox mf-30" :class="[firstaids.tourniquet?'box-active':'']" @click="reverse('tourniquet')"><text class="checkbox-text" :class="[firstaids.tourniquet?'box-text-active':'']" >止血带</text></div>
                        <div class="input mf-10" @click="getTime">
                            <text class="input-text">{{tourniquetTime | filterTime}}</text>
                            <image :src="chooseUrl" class="img-unit"></image>
                        </div>                      
                    </div>
                      
                    <div class="box mT-20">                       
                        <div class="checkbox" :class="[firstaids.pulseoxygen?'box-active':'']" @click="reverse('pulseoxygen')"><text class="checkbox-text" :class="[firstaids.pulseoxygen?'box-text-active':'']" >脉氧监护</text></div>
                        <div class="checkbox mf-30" :class="[firstaids.electrocardiograph?'box-active':'']" @click="reverse('electrocardiograph')"><text class="checkbox-text" :class="[firstaids.electrocardiograph?'box-text-active':'']" >心电监护</text></div>
                        <div class="checkbox mf-30" :class="[firstaids.ordinaryoxygen?'box-active':'']" @click="reverse('ordinaryoxygen')"><text class="checkbox-text" :class="[firstaids.ordinaryoxygen?'box-text-active':'']" >普通吸氧</text></div>
                        <div class="checkbox mf-30" :class="[firstaids.maskoxygen?'box-active':'']" @click="reverse('maskoxygen')"><text class="checkbox-text" :class="[firstaids.maskoxygen?'box-text-active':'']" >面罩吸氧</text></div>                       
                    </div>
                    <div class="box">                       
                        <div class="checkbox" :class="[firstaids.heart?'box-active':'']" @click="reverse('heart')"><text class="checkbox-text" :class="[firstaids.heart?'box-text-active':'']" >心外起搏</text></div>
                        <div class="checkbox mf-30" :class="[firstaids.airway?'box-active':'']" @click="reverse('airway')"><text class="checkbox-text" :class="[firstaids.airway?'box-text-active':'']" >开放气道</text></div>                                             
                    </div>

                    <div class="box mT-20">                       
                        <div class="checkbox" :class="[firstaids.supination?'box-active':'']" @click="reverse('supination')"><text class="checkbox-text" :class="[firstaids.supination?'box-text-active':'']" >仰卧</text></div>
                        <div class="checkbox mf-30" :class="[firstaids.side?'box-active':'']" @click="reverse('side')"><text class="checkbox-text" :class="[firstaids.side?'box-text-active':'']" >侧卧</text></div>
                        <div class="checkbox mf-30" :class="[firstaids.situp?'box-active':'']" @click="reverse('situp')"><text class="checkbox-text" :class="[firstaids.situp?'box-text-active':'']" >端坐</text></div>
                        <div class="checkbox mf-30" :class="[firstaids.breatherpipe?'box-active':'']" @click="reverse('breatherpipe')"><text class="checkbox-text" :class="[firstaids.breatherpipe?'box-text-active':'']" >通气管</text></div>                       
                    </div>
                    <div class="box">                       
                        <div class="checkbox" :class="[firstaids.Openairway?'box-active':'']" @click="reverse('Openairway')"><text class="checkbox-text" :class="[firstaids.Openairway?'box-text-active':'']" >疏通气道</text></div>
                        <div class="checkbox mf-30" :class="[firstaids.respirator?'box-active':'']" @click="reverse('respirator')"><text class="checkbox-text" :class="[firstaids.respirator?'box-text-active':'']" >简易呼吸器</text></div>             
                        <div class="checkbox mf-30" :class="[firstaids.trachea?'box-active':'']" @click="reverse('trachea')"><text class="checkbox-text" :class="[firstaids.trachea?'box-text-active':'']" >气管插管</text></div>                                             
                    </div>

                    <div class="box mT-20">                       
                        <div class="checkbox" :class="[firstaids.breathing?'box-active':'']" @click="reverse('breathing')"><text class="checkbox-text" :class="[firstaids.breathing?'box-text-active':'']" >呼吸机</text></div>
                        <div class="checkbox mf-30" :class="[firstaids.CPR?'box-active':'']" @click="reverse('CPR')"><text class="checkbox-text" :class="[firstaids.CPR?'box-text-active':'']" >CPR</text></div>
                        <div class="checkbox mf-30" :class="[firstaids.defibrillate?'box-active':'']" @click="reverse('defibrillate')"><text class="checkbox-text" :class="[firstaids.defibrillate?'box-text-active':'']" >除颤</text></div>
                        <div class="input mf-10">
                            <input type="tel" class="input-text" v-model="defibrillateNo"></input>
                            <text class="input-unit">次</text>
                        </div> 
                    </div>
                    <div class="box">                            
                        <div class="line">                    
                            <div class="title"><text class="box-text">药物:</text></div>                        
                            <input class="textarea" v-model="yaowu"></input>
                        </div>                    
                    </div>
                    <div class="box">                            
                        <div class="line">                    
                            <div class="title"><text class="box-text">初步诊断:</text></div>                        
                            <input class="textarea" v-model="chuzhen"></input>
                        </div>                    
                    </div>
                    <div class="box">                            
                        <div class="line">                    
                            <div class="title"><text class="box-text">诊断:</text></div>                        
                            <input class="textarea" v-model="zhenduan"></input>
                        </div>                    
                    </div>
                    <div class="box">
                        <div class="title"><text class="box-text">急救结果:</text></div>
                        <div class="checkbox"  :class="[cur==1?'box-active':'']" @click="cur=1"><text class="checkbox-text" :class="[cur==1?'box-text-active':'']">送达医院</text></div>
                        <div class="checkbox mf-10"  :class="[cur==2?'box-active':'']" @click="cur=2"><text class="checkbox-text" :class="[cur==2?'box-text-active':'']">现场死亡</text></div>
                        <div class="checkbox-auto mf-10"  :class="[cur==3?'box-active':'']" @click="cur=3"><text class="checkbox-text" :class="[cur==3?'box-text-active':'']">途中心跳、呼吸停止</text></div>
                        <div class="checkbox mf-10"  :class="[cur==4?'box-active':'']" @click="cur=4"><text class="checkbox-text" :class="[cur==4?'box-text-active':'']">转院护送</text></div>
                    </div>
                    <div class="box">                            
                        <div class="line">                    
                            <div class="title"><text class="box-text">送达医院:</text></div> 
                            <input class="textarea" v-model="endAdress"></input>                       
                        </div>                    
                    </div>
                    <div class="sign-box">
                        <div >
                            <text class="box-text">急救医师签字:</text>
                            <div class="img mT-10" @click="getSign(1)"><image :src="signImg1" class="signImg"></image></div>
                        </div>
                        <div class="mf-10">
                            <text class="box-text">急救护士签字:</text>
                            <div class="img mT-10" @click="getSign(2)"><image :src="signImg2" class="signImg"></image></div>
                        </div>
                        <div class="mf-10">
                            <text class="box-text">接收医师签字:</text>
                            <div class="img mT-10" @click="getSign(3)"><image :src="signImg3" class="signImg"></image></div>
                        </div>
                    </div>
                    <div class="mT-20">
                        <text class="box-text mT-10">下列情况请病员家属签字:</text>
                        <div v-for="(item,index) in infoTitle.title" :key="index">
                            <text class="box-text mT-10">{{(index+1)+'.'+infoTitle.title[index]}}</text>
                        </div>
                    </div>
                    <div class="sign-box mT-20">
                        <div class="sign-box">
                            <text class="box-text mT-8">我同意上述第</text>
                            <div class="sign-box-input" @click='IS_infoTitle_SHOW=!IS_infoTitle_SHOW'><text class="sign-box-input-text">{{value}}</text></div>
                            <text class="box-text mT-8">项表述</text>
                        </div>
                        <div class="mf-30">
                            <text class="box-text mT-8">患者(家属)或在场人员签字:</text>
                            <div class="img mB-30 mT-10" @click="getSign(4)"><image :src="signImg4" class="signImg"></image></div>
                        </div>
                        <div v-if="IS_infoTitle_SHOW" class="infoTitle_SHOW">
                            <div class="infoTitle_SHOW_box" @click="infoTitle.select=0,value=1,IS_infoTitle_SHOW=false"><text class="box-text">1</text></div>
                            <div class="infoTitle_SHOW_box" @click="infoTitle.select=1,value=2,IS_infoTitle_SHOW=false"><text class="box-text">2</text></div>
                            <div class="infoTitle_SHOW_box" @click="infoTitle.select=2,value=3,IS_infoTitle_SHOW=false"><text class="box-text">3</text></div>
                            <div class="infoTitle_SHOW_box" @click="infoTitle.select=3,value=4,IS_infoTitle_SHOW=false"><text class="box-text">4</text></div>
                        </div>
                    </div>
                </div>
            </cell>
        </list>       
    </div>
</template>
<script>
    import WeexNativeModule from "../../common/WeexNativeModule"
    import DateUtil from "../../common/util/DateUtil"
    import StringUtils from "../../common/util/StringUtils"
    import ACApi from "../../common/http/ACApi"
    import Resource from "../../../dist/res/Resource"
    export default {
        name: 'EMNewMainEditInfo',
        data: function () {   
            return {
                imgUrl: 'title_cha_img.png',
                chooseUrl: 'choose.png',
                info: {
                    orgCode: '',
                    doctorId: '',
                    doctor: '',
                    orderId: '',
                    pid: '',
                    id: ''
                },
                firstaids: {
                    compression: false,         //加压
                    dress: false,               //包扎
                    disinfect: false,           //消毒
                    splint: false,              //夹板
                    cervicalgear: false,        //颈托
                    ECG: false,                 //ECG
                    tourniquet: false,          //止血带
                    pulseoxygen: false,         //脉氧监护
                    electrocardiograph: false,  //心电监护
                    ordinaryoxygen: false,      //普通吸氧
                    maskoxygen: false,          //面罩吸氧
                    heart: false,               //心外起搏
                    airway: false,              //疏通气道
                    supination: false,          //仰卧
                    side: false,                //侧卧
                    situp: false,               //端坐
                    breatherpipe: false,        //通气管
                    Openairway: false,          //疏通气道
                    respirator: false,          //简易呼吸器
                    trachea: false,             //气管插管
                    breathing: false,           //呼吸机
                    CPR: false,                 //CPR
                    defibrillate: false,        //除颤
                },
                tourniquetTime: '', //止血带时间
                defibrillateNo: '', //除颤次数
                yaowu: '',  //药物
                chuzhen: '',//初步诊断
                zhenduan: '', //诊断
                cur: '',       //急救结果
                endAdress: '',
                value: '',
                signImg1: '',
                signImg2: '',
                signImg3: '',
                signImg4: '',
                IS_infoTitle_SHOW: false,
                infoTitle: {
                    title: [
                    '病人（家属）要求不送医院，后果自负。',
                    '病人（家属）要求送往自己选定的医院，后果自负。',
                    '我已知晓患者病情危重，抢救及转院过程中可能病情恶化甚至死亡。',
                    '急救车到达时，患者心跳、呼吸已停止。'
                    ],
                    select: ''
                },
            }                                                     
        },
        mounted: function() {
            let _this = this

            WeexNativeModule.showProgressDialog('请稍等')
            WeexNativeModule.getLoginUser(function (data) {
                let loginUser = JSON.parse(data.loginUser)
                _this.info.orgCode = loginUser.orgid
                _this.info.doctorId = loginUser.id
                _this.info.doctor = loginUser.username               
            })
            WeexNativeModule.getParam(function (data) {
                let param = JSON.parse(data.param)            
                _this.info.orderId = param.taskcode
                _this.info.pid = param.pid
                _this.getFirstAidCase()
            })
        },
        filters: {
            filterTime: function(item) {
                if(item) {
                    let time = DateUtil.formatTime(item,'yyyy-MM-dd hh:mm')
                    return time
                }
            }
        },
        methods: { 
            finish: function() {
                WeexNativeModule.finish()
            },
            getTime: function() {
                let _this = this
                let defaultdate
                if(!StringUtils.isEmpty(_this.tourniquetTime)){
                    defaultdate = DateUtil.formatTime(
                        new Date(_this.tourniquetTime),'yyyy-MM-dd hh:mm:ss');
                }else {
                    defaultdate = DateUtil.formatTime(
                        new Date(),'yyyy-MM-dd hh:mm:ss');
                }
               WeexNativeModule.selectDateTime(defaultdate,true,true,true,true,true,true,false,"","",function(time) {
                   _this.tourniquetTime = time.data
               })
            },
            getSign: function(type) {
                let _this = this
                WeexNativeModule.signName(function(data) {
                    switch(type) {
                        case 1: _this.signImg1 = data.url;
                            break;
                        case 2: _this.signImg2 = data.url;
                            break;
                        case 3: _this.signImg3 = data.url;
                            break;
                        case 4: _this.signImg4 = data.url;
                            break;
                    }
                })
            },
            reverse: function (key){
                this.firstaids[key] = this.firstaids[key] && this.firstaids[key] !== false ? false : true
                if(key === "tourniquet" ){
                    if(this.firstaids[key]){
                        this.tourniquetTime = DateUtil.formatTime(
                            new Date(),'yyyy-MM-dd hh:mm:ss');

                    }else {
                        this.tourniquetTime = "";
                    }
                }

            },
            getFirstAidCase: function() {
                let _this = this
                ACApi.getFirstAidCase(_this.info.pid,{
                    onSuccess: function(res) {
//                        WeexNativeModule.alert(res)
                        let data = JSON.parse(res)
                        if (data.result && data.result.diagnosis && data.result.diagnosis.content) {
                            _this.info.id = data.result.diagnosis.id
                            let aidCaseJson = JSON.parse(data.result.diagnosis.content)
                            let firstaidArr = aidCaseJson.firstaidArr
                            for(let key in _this.firstaids) {
                                for(let _key in firstaidArr) {
                                    if(key ===_key) {
                                        _this.firstaids[key] = firstaidArr[_key]
                                    }
                                }
                            }
                            _this.tourniquetTime = aidCaseJson.tourniquetTime ? aidCaseJson.tourniquetTime : ''
                            _this.defibrillateNo = aidCaseJson.defibrillateNo ? aidCaseJson.defibrillateNo : ''
                            _this.yaowu = aidCaseJson.yaowu ? aidCaseJson.yaowu : ''
                            _this.chuzhen = aidCaseJson.chuzhen ? aidCaseJson.chuzhen : ''
                            _this.zhenduan = aidCaseJson.zhenduan ? aidCaseJson.zhenduan : ''
                            _this.cur = aidCaseJson.cur ? aidCaseJson.cur : ''
                            _this.endAdress = aidCaseJson.endAdress ? aidCaseJson.endAdress : ''
                            _this.signImg1 = aidCaseJson.img1 ? aidCaseJson.img1 : ''
                            _this.signImg2 = aidCaseJson.img2 ? aidCaseJson.img2 : ''
                            _this.signImg3 = aidCaseJson.img3 ? aidCaseJson.img3 : ''
                            _this.signImg4 = aidCaseJson.img4 ? aidCaseJson.img4 : ''
                            if(aidCaseJson.infoTitle) {
                                switch(aidCaseJson.infoTitle.select) {
                                    case 0: _this.value = 1
                                        break
                                    case 1: _this.value = 2
                                        break
                                    case 2: _this.value = 3
                                        break
                                    case 3: _this.value = 4
                                        break
                                }
                            }
                        }
                        WeexNativeModule.dimissProgressDialog()
                    },
                    onError: function(msg) {
                        WeexNativeModule.dimissProgressDialog()
//                        WeexNativeModule.alert(msg)
                    }
                })
            },
            save: function() {
                let _this = this 
                let curTitle
                switch (_this.cur) {
                    case '1':
                        curTitle = '送达医院'
                        _this.endAdress = '本院'
                        break
                    case '2':
                        curTitle = '现场死亡'
                        break
                    case '3':
                        curTitle = '途中心跳，呼吸停止'
                        break
                    case '4':
                        curTitle = '转院护送'
                        break
                    default:
                        break
                }                             
                let json = {
                    firstaidArr: _this.firstaids,
                    yaowu: _this.yaowu,
                    chuzhen: _this.chuzhen,
                    zhenduan: _this.zhenduan,
                    endAdress: _this.endAdress,
                    tourniquetTime: _this.tourniquetTime,
                    defibrillateNo: _this.defibrillateNo,
                    cur: _this.cur,
                    curTitle: curTitle,
                    infoTitle: {
                        title: _this.infoTitle.title[_this.infoTitle.select],
                        select: _this.infoTitle.select
                    },
                    img1: _this.signImg1,
                    img2: _this.signImg2,
                    img3: _this.signImg3,
                    img4: _this.signImg4
                }
                let postjson = {
                    'content': JSON.stringify(json),
                    'doctor': _this.info.doctor,
                    'doctorId': _this.info.doctorId,
                    'orderId': _this.info.orderId,
                    'orgCode': _this.info.orgCode,
                    'pid': _this.info.pid,
                    'id': _this.info.id ? _this.info.id : ''
                }
//                WeexNativeModule.alert(postjson)
                WeexNativeModule.showProgressDialog('数据提交中...')
                ACApi.addDiagnosis(postjson,{
                    onSuccess: function(data) {
                        WeexNativeModule.dimissProgressDialog()
                        WeexNativeModule.toast('提交成功')
                        WeexNativeModule.refreshNativePage();
                        WeexNativeModule.finish()
//                        WeexNativeModule.alert(data)
                    },
                    onError: function(msg) {
                        WeexNativeModule.dimissProgressDialog()
//                        WeexNativeModule.alert(msg)
                    }
                })
            }
        }
    }
</script>
<style>
    .header {
        height: 40px;
        background-color: #FFF;
        display: flex;
        flex-direction: row;
        justify-content: space-between;    
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width: 0.5px;
        border-bottom-color: #f2f2f2;
    }
    .header-left {
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
    }
    .header-left-img {
        width: 30px;
        height: 30px;
        margin-left: 15px;
    }
    .header-right {
        width: 80px;
        height: 25px;
        background-color: #4c7fd8;
        margin-right: 20px;  
        border-radius: 2px;     
    }
    .header-text {
        font-size: 13px;
        color: #666;
    }
    .header-right-text {
        font-size: 13px;
        color: #FFF;
        text-align: center;
        line-height: 25px;       
    }
    .banner-tab {  
        width: 750px;      
        height: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #f2f2f2;
        padding-left: 5px;
        padding-right: 5px;              
    }
    .tab {
        width: 80px;
        height: 30px;
        display: flex;
        justify-content: center; 
        margin-left: 5px;
        margin-right: 5px;
    }
    .tab-text {
        text-align: center;
        font-size: 12px;
        color: #666;
    }
    .tab-active {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #4c7fd8;
    }
    .content {
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 10px;
        padding-bottom: 20px;
        box-sizing: border-box;
    }
    .box {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;   
        height: 40px;
        align-items: center;
    }
    .sign-box {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        position: relative;
    }
    .box-text {
        font-size: 12px;
        color: #666;
    }
    .line {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;        
    }

    .title {
        width: 80px;
    }

    .input {
        position: relative;
        width: 135px;
        box-sizing: border-box;
        padding-left: 8px;
        height: 25px;       
        border-radius: 5px;
        border-style: solid;
        border-width: 0.5px;
        border-color: #b1b1b1;
    }
    .input-text {  
        color: #666;
        line-height: 22px;     
        font-size: 12px;
    }

    .checkbox {
        width: 87px;
        height: 25px;
        background-color: #f2f2f2;
        border-radius: 3px;        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .checkbox-auto {  
        display: flex;
        justify-content: center;
        align-items: center;      
        height: 25px;
        background-color: #f2f2f2;
        border-radius: 3px;        
        padding-left: 10px;
        padding-right: 10px;
    }
    .checkbox-text {
        font-size: 12px;
        color: #666;
    }   
    .mf-30 {
        margin-left: 50px;
    }
    .mf-10 {
        margin-left: 10px;
    }
    .mT-10 {
        margin-top: 10px;
    }
    .mT-8 {
        margin-top: 8px;
    }
    .mT-20 {
        margin-top: 15px;
    }
    .mB-30 {
        margin-bottom: 30px;
    }
    .box-active {
        background-color: #4c7fd8;
    }
    .box-text-active {
        color: #FFF;
    }
    .input-unit {
        position: absolute;
        color: #666;
        font-size: 12px;
        top: 4px;
        right: 8px;
    }
    .box-textarea {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;   
        height: 60px;    
        margin-top: 9px;   
    }
    .line-textarea {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        box-sizing: border-box;
        margin-right: 70px;
    }
    .title-textarea {
        width: 80px;
        padding-top: 8px;
    }
    .textarea {
        box-sizing: border-box;
        flex: 1;
        border-radius: 5px;
        border-style: solid;
        border-width: 0.5px;
        border-color: #b1b1b1;
        font-size: 12px;
        height: 25px; 
        padding-left: 3px;
        padding-top: 3px; 
    }
    .img {
        width: 120px;
        height: 60px;
        background-color: #f2f2f2;
    }
    .signImg {
        width: 120px;
        height: 60px;
    }
    .sign-box-input {
        width: 50px;
        height: 30px;
        border-style: solid;
        border-width: 0.5px;
        border-color: #b1b1b1;
        border-radius: 5px;
        justify-content: center;
        align-items: center;
    }
    .sign-box-input-text {
        font-size: 12px;
        color: #666;
        justify-content: center;
        align-items: center;       
    }
    .img-unit {
        position: absolute;                  
        top: 3px;
        right: 5px;
        width: 8px;
        height: 16px;
    }
    .infoTitle_SHOW {
        position: absolute;
        top: 31px;
        left: 73px;
        width: 50px;
        height: 80px;
        border-width: 0.5px;
        border-color: #b1b1b1;
        border-radius: 3px;
        
    }
    .infoTitle_SHOW_box {
        flex: 1;
        width: 50px;
        border-bottom-width: 0.5px;
        border-bottom-color: #b1b1b1;
        border-bottom-style: solid;
        justify-content: center;
        align-items: center;
    }
</style>

